<template>
  <page-frame>
    <div class="home-person-time-arrange">
      <div class="toptitle">
        <div class="left">居家养老 - 服务项目分配</div>
        <div class="right">
          <div class="btns">
            <div>
              <el-button @click="isOverStep" class="lightGreenBtn">保存</el-button>
              <el-button @click="back">返回</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <div class="inputs">
              <el-form label-position="right" label-width="80px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="服务对象">
                      <el-input v-model="memberObj.memberName" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="项目名称">
                      <el-input v-model="serviceItem.serviceName" disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3" style="height: 1px;"></el-col>
                  <el-col :span="10" v-show="serviceItem.period == 1">
                    <el-form-item label="频次">
                      <el-input  :value="'每周'+serviceItem.num+'次'"  disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" v-show="serviceItem.period == 0">
                    <el-form-item label="频次">
                      <el-input v-show="serviceItem.period == 0" value="每天"  disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="计划安排" style="margin-bottom: 0px;">
                        <el-tag v-for="item of serviceItem.workInfoforEmp" type="primary">{{item}}</el-tag>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">项目计划分配</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <div class="inputs">
              <el-form label-position="right" label-width="80px" style="margin-left: -20px;">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="团队">
                      <el-select v-model="queryData.tmId" placeholder="请选择团队">
                        <el-option
                          v-for="item in teamList"
                          :label="item.tmName"
                          :value="item.tmId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2" style="height: 1px;"></el-col>
                  <el-col :span="10">
                    <el-form-item label="空余时间">
                      <el-input v-model="queryData.interval" placeholder="请填空余时间"></el-input>小时
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="周历">
                      <el-checkbox-group v-model="queryData.week">
                        <el-checkbox label="1">周一</el-checkbox>
                        <el-checkbox label="2">周二</el-checkbox>
                        <el-checkbox label="3">周三</el-checkbox>
                        <el-checkbox label="4">周四</el-checkbox>
                        <el-checkbox label="5">周五</el-checkbox>
                        <el-checkbox label="6">周六</el-checkbox>
                        <el-checkbox label="0">周日</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="时间区间">
                      <el-time-picker
                        is-range
                        v-model="queryData.date"
                        format="HH:mm"
                        placeholder="选择时间区间">
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <el-table :data="tableData5" inline style="width: 100%" @expand = "handleExpand">
              <el-table-column type="expand" >
                <template scope="props">
                  <!--最新的表单-->
                  <el-form :model="props.row.addEmpScDTOs" ref="addEmpScDTOs" label-width="85px" class="demo-dynamic">
                    <el-row>
                      <el-col :span="9">
                        <el-form-item label="生效时间">
                          <el-date-picker
                            v-model="props.row.addEmpScDTOs.effectiveDate"
                            type="date"
                            placeholder="选择生效日期"
                            :picker-options="pickerOptions0">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row v-for="(domain, index) in props.row.addEmpScDTOs.addEmpScDeatilDTOs">
                      <el-col :span="13">
                        <el-form-item label="周历" prop="weeks">
                          <el-checkbox-group v-model="domain.week">
                            <el-checkbox label="1">周一</el-checkbox>
                            <el-checkbox label="2">周二</el-checkbox>
                            <el-checkbox label="3">周三</el-checkbox>
                            <el-checkbox label="4">周四</el-checkbox>
                            <el-checkbox label="5">周五</el-checkbox>
                            <el-checkbox label="6">周六</el-checkbox>
                            <el-checkbox label="0">周日</el-checkbox>
                          </el-checkbox-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="9">
                        <el-form-item label="时间区间">
                          <el-time-picker
                            is-range
                            format="HH:mm"
                            v-model="domain.value"
                            placeholder="请选择时间段">
                          </el-time-picker>
                          <a style="cursor: pointer" @click.prevent="removeDomain(props.row.addEmpScDTOs.addEmpScDeatilDTOs,index)">删除</a>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item>
                      <el-button size="small" @click="addDomain(props.row)">新增工作时间</el-button>
                    </el-form-item>
                    <!--<el-row>-->
                      <!--<el-col :span="14" v-show="props.row.prompt" style="color:red">-->
                        <!--<el-form-item label="提示:">-->
                         <!--<span>已选服务超出套餐内服务频次（{{serviceItem.period}}）</span>-->
                        <!--</el-form-item>-->
                      <!--</el-col>-->
                    <!--</el-row>-->
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="团队成员" prop="emName" width="100px">
              </el-table-column>
              <el-table-column v-for="data of weekDataList" :label="data.key" :prop="data.label">
                <!--<template scope="scope">-->
                  <!--<el-tag v-for="item of scope.row.monday" type="primary">{{item}}</el-tag>-->
                <!--</template>-->
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import homeApi from '../../service/member/homeApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';
  import outRegistrationApi from '../../service/serCenter/outRegistrationApi'
  export default {
    data () {
      return {
        ways:true,
        currentPeriod:1,
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
        },
        memberObj:null,
        memberId:null,
        tableData5:[],
        tableData6: [{
          emId: 1,
          emName: "王铁军",
          monday: [
            "10:00-11:00","12:00-13:00"
          ],
          tuesday: [
            "10:00-11:00"
          ],
          wednesday: [],
          thursday: [
            "10:00-11:00"
          ],
          friday: [],
          saturday: [
            "10:00-11:00"
          ],
          sunday: [
            "10:00-11:00"
          ],
          prompt:false,
          addEmpScDTOs: {
            effectiveDate: "",
            emId: 0,
            emName: "",
            expiryDate: "",
            addEmpScDeatilDTOs: [{
              value:[],
              timeEnd: "2017-09-11T02:48:12.953Z",
              timeStart: "2017-09-11T02:48:12.953Z",
              week:[],
            }]
          }
        }, {
          emId: 1,
          emName: "张晓",
          monday: [
            "10:00-11:00"
          ],
          tuesday: [
            "10:00-11:00"
          ],
          wednesday: [
            "10:00-11:00"
          ],
          thursday: [
            "10:00-11:00"
          ],
          friday: [

          ],
          saturday: [
            "10:00-11:00"
          ],
          sunday: [
            "10:00-11:00"
          ],
          prompt:false,
          addEmpScDTOs: {
            effectiveDate:"",
            emId: 0,
            emName: "",
            expiryDate: "",
            addEmpScDeatilDTOs: [{
              value:[],
              timeEnd: "2017-09-11T02:48:12.953Z",
              timeStart: "2017-09-11T02:48:12.953Z",
              week:[],
            }],
          }
        }],
        submitData:{
          addEmpScDTOs: [
            {
              addEmpScDeatilDTOs: [
                {
                  timeEnd: "",
                  timeStart: "",
                  value:[],
                  week: [
                    0
                  ]
                }
              ],
              effectiveDate: "",
              emId: 0,
              emName: "",
              expiryDate: ""
            }
          ],
          memberId: 0,
          period:null,
          planItemId: 0,
          serviceId: 0,
          serviceName: ""
        },
        serviceItem:{
          "planItemId": null,
          "serviceId": null,
          "serviceName": "",
          "week": "",
          "month": "",
          "timeStart": "",
          "timeEnd": "",
          "period": null,
          "tmId": "",
          "tmType": 0,
          "num": null,
          "tmIdArr": [],
          "timeString": "",
          "servicePlanItemServiceTimetDTO": {
            "week": "周四,周五,周日",
            "month": "",
            "serviceTime": [
              "03:00:00-08:00:00"
            ]
          }
        },
        queryData:{
          "dateEnd": "",
          "dateStart": "",
          "date":[new Date(1970, 1, 1, 8, 0), new Date(1970, 1, 1, 18, 0)],
          "interval": null,
          "tmId": null,
          "week":["0","1","2","3","4","5","6"]
        },
        addEmpScDTOs: {
          addEmpScDeatilDTOs: [{
            value:[],
            timeEnd: "2017-09-11T02:48:12.953Z",
            timeStart: "2017-09-11T02:48:12.953Z",
            week:[],
          }],
          effectiveDate:"",
          emId: 0,
          emName: "",
          expiryDate: ""
        },
        teamList:[],
        weekDataList: [{value:"",key:"",label:""}],
        weekDataObj:{value:"",key:"",label:""},
      }
    },
    computed: {

    },
    methods: {
      init(){
        if(this.$route.params.serviceItemObj){
          this.serviceItem = this.$route.params.serviceItemObj;
          this.memberObj = this.$route.params.memberObj;
          this.memberId = this.memberObj.memberId;
          this.getAllTeams();
        }else{
          this.$router.push({name:'homeBased'});
        };
      },
      /**
       * 查询空余时间
       */
      query(){
        let self = this;
        this.changeWeek();
        this.queryData.dateStart = commonJs.formatTime1970(this.queryData.date[0]);
        this.queryData.dateEnd = commonJs.formatTime1970(this.queryData.date[1]);
        homeApi.queryEmpScListtoFree(this.queryData).then(response => {
          if(response.data.status==200){
            self.tableData5 = response.data.data;
            for(let table of self.tableData5){
              table.addEmpScDTOs.emId = table.emId;
              table.addEmpScDTOs.emName = table.emName;
              table.addEmpScDTOs.expiryDate = "2017-09-13T03:39:25.844Z";
            };
           self.reduction();
          }
        },(response)=>{

        });
      },
      /**
       * 转化表格字段
       */
      reduction(){
        for(let emItem of this.tableData5){
          emItem.monday = emItem.monday.join(" , ");
          emItem.tuesday = emItem.tuesday.join(" , ");
          emItem.wednesday = emItem.wednesday.join(" , ");
          emItem.thursday = emItem.thursday.join(" , ");
          emItem.friday = emItem.friday.join(" , ");
          emItem.saturday = emItem.saturday.join(" , ");
          emItem.sunday = emItem.sunday.join(" , ");
          for(let item of emItem.addEmpScDTOs.addEmpScDeatilDTOs){
            item.value[0] = item.timeStart;
            item.value[1] = item.timeEnd;
          }
        };
      },
      /**
       * 变更查询周历
       */
      changeWeek(){
        this.weekDataList = [];
        for (let weekDay of this.queryData.week){
          switch(weekDay){
            case "0":
              this.weekDataObj.value = 0;
              this.weekDataObj.key = "周日";
              this.weekDataObj.label = "sunday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
            case "1":
              this.weekDataObj.value = 1;
              this.weekDataObj.key = "周一";
              this.weekDataObj.label = "monday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
            case "2":
              this.weekDataObj.value = 2;
              this.weekDataObj.key = "周二";
              this.weekDataObj.label = "tuesday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
            case "3":
              this.weekDataObj.value = 3;
              this.weekDataObj.key = "周三";
              this.weekDataObj.label = "wednesday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
            case "4":
              this.weekDataObj.value = 4;
              this.weekDataObj.key = "周四";
              this.weekDataObj.label = "thursday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
            case "5":
              this.weekDataObj.value = 5;
              this.weekDataObj.key = "周五";
              this.weekDataObj.label = "friday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
            case "6":
              this.weekDataObj.value = 6;
              this.weekDataObj.key = "周六";
              this.weekDataObj.label = "saturday";
              this.weekDataList.push(this.weekDataObj);
              this.weekDataObj = {value:"",key:"",label:""};
              break;
          };
        };
        this.weekDataList.sort(function(a,b){
          return a.value-b.value});
      },
      /**
       * 添加工作时间
       */
      addDomain(row) {
        row.addEmpScDTOs.addEmpScDeatilDTOs.push({
          value:[],
          timeEnd: "",
          timeStart: "",
          week:[],
        });
      },
      /**
       * 删除工作时间
       */
      removeDomain(domain,index) {
        domain.splice(index, 1);
      },
      /**
       * 获得已制定计划中服务项目的总次数
       */
      chosenItemPeriod() {
        let weekLength = 0;
        for(let emItem of this.tableData5){
          for(let domain of emItem.addEmpScDTOs.addEmpScDeatilDTOs){
            weekLength = weekLength + domain.week.length;
          };
        };
        return weekLength;
      },
      /**
       * 是否取消工作安排
       */
      handleExpand(row, expanded){
        if(!expanded){
          this.$confirm('确定要取消对该成员的任务安排？', '删除操作', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            row.addEmpScDTOs ={
              addEmpScDeatilDTOs: [{
                value:[],
                timeEnd: "",
                timeStart: "",
                week:[],
              }],
              effectiveDate:"",
              emId: 0,
              emName: "",
              expiryDate: ""
            }
          }).catch(() => {

          });
        };
      },
      /**
       * 提交计划
       */
      submitForm() {
        this.submitData.serviceName = this.serviceItem.serviceName;
        this.submitData.serviceId = this.serviceItem.serviceId;
        this.submitData.planItemId = this.serviceItem.planItemId;
        this.submitData.period = this.serviceItem.period;
        this.submitData.memberId =  this.memberId;
        this.submitData.addEmpScDTOs = [];
        for(let emItem of this.tableData5){
          if(emItem.addEmpScDTOs.effectiveDate != ""){
            for(let item of emItem.addEmpScDTOs.addEmpScDeatilDTOs){
              item.timeStart =  commonJs.formatTime1970(item.value[0]);
              item.timeEnd =  commonJs.formatTime1970(item.value[1]);
            }
            this.submitData.addEmpScDTOs.push(emItem.addEmpScDTOs);
          };
        };
        homeApi.saveEmpServicePlanItemPlan(this.submitData).then(
          (response)=>{
            if(response.data.status==200){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              this.$router.push({name:'homePersonCharge',params:{serviceItemObj:this.$route.params.serviceItemObj,memberObj:this.$route.params.memberObj}});
            }else{
              this.$message({
                message: '保存失败',
                type: 'error'
              });
            }
          },
        );
      },
      /**
       * 判断是否超出套餐内服务频次
       */
      isOverStep(){
        let weekLength = this.chosenItemPeriod();
        if(this.serviceItem.period == "0"){//项目频次为：每天
            this.submitForm();
        }else if(this.serviceItem.period == "1"){//项目频次为：每周
          if(weekLength > this.serviceItem.num){
            this.$confirm(' 已选服务超出套餐内服务频次,是否继续保存', '删除操作', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.submitForm();
            }).catch(() => {
            });
          }else{
            this.submitForm();
          };
        };
      },
      /**
       * 获取所有团队
       */
      getAllTeams(){
        let self = this;
        homeApi.getAllTeams().then(
          (response)=>{
            if(response.data.status==200){
             self.teamList = response.data.data;
            }else{}
          },
        );
      },
      /**
       * 返回
       */
      back(){
        this.$router.push({name:'homePersonCharge',params:{serviceItemObj:this.$route.params.serviceItemObj,memberObj:this.$route.params.memberObj}});
      },
    },
    watch:{

    },
    mounted: function () {
      this.init();
    },

  }
</script>
<style>

     /*el-table__expand*/
     .home-person-time-arrange .el-table__expanded-cell{
       padding: 20px 20px;
     }
     .home-person-time-arrange .el-table__expand-icon{
       background: url(../../img/nav-1.png) no-repeat center;
     }
     .home-person-time-arrange  .el-table__expand-icon.el-table__expand-icon--expanded{
       background: url(../../img/nav-10.png) no-repeat center;
     }
     .home-person-time-arrange  .el-icon-arrow-right:before{
       content:""
     }



     .home-person-time-arrange .el-autocomplete{
       width:100%;
     }
     .home-person-time-arrange .teamMember{
       margin-left:53px
     }
     .home-person-time-arrange .teamMember .all,.choose{
       border:1px solid #ccc;
       width: 43%;
       padding:10px 10px 0px;
       height: 366px;
       margin-bottom: 20px;
     }
     .home-person-time-arrange .teamMember>.all{
       float: left;
     }
     .home-person-time-arrange .teamMember>.label{
       padding-bottom: 10px;
       font-size: 14px
     }
     .home-person-time-arrange .teamMember>.label>span{
       color:#3fc6d2;
       margin-left: 5px;
       font-size: 12px
     }
     .home-person-time-arrange .teamMember .choose{
       float: right;
     }
     .home-person-time-arrange .teamMember .all .allName{
       height: 313px;
       overflow: scroll;
       border:1px solid #d9d9d9;
     }
     .home-person-time-arrange .teamMember .Item{
       height: 322px;
       overflow: scroll;
       border:1px solid #d9d9d9;
     }
     .home-person-time-arrange .teamMember .chooseName{
       color: #3fc6d2;
       margin-top:10px;
       font-size: 14px;
     }
     .home-person-time-arrange .teamMember .el-icon-close{
       color:#3fc6d2;
       font-size: 12px;
     }
     .home-person-time-arrange .teamMember .all .input-item{
       margin-bottom: 5px;
     }
     .home-person-time-arrange .teamMember .all .input-item .el-select{
       width: 100%!important;
     }
     .home-person-time-arrange .teamMember .all .allName div,.choose .Item div{
       padding:5px 0px;
       cursor: pointer;
     }
     .home-person-time-arrange .teamMember .all .allName div:hover{
       background-color: rgba(228, 250, 255, 0.8);
     }
     .home-person-time-arrange .teamMember .choose .del-staff{
       float: right;
     }
</style>
